import React, { Component, createRef } from 'react'
import {UserOutlined, DingtalkOutlined } from '@ant-design/icons'
import { Button, Form, Input, message, Space } from 'antd'
import Captcha from '../../components/Captcha'
import req from '../../http/req'
import url from '../../config/url'
import { withRouter } from 'react-router-dom'
class MobileForm extends Component {
  state = {
    key: '',
    // 倒计时初始值
    time: 5,
    // 默认可以点击  短信验证码按钮
    disabled: false
  }
  // 定义一个方法传给子组件
  saveKey = (key) => {
    // 子组件调用传参 修改state 实现子传父
    this.setState({ key })
  }
  // ref绑定组件 获取组件实例
  formRef = createRef()
  captchaRef = createRef()
  render() {
    return (
      <div>
        {/* 手机号 验证码 短信验证码 */}
        <Form
          ref={this.formRef}
          name="mobile_login"
          className="login-form"
          initialValues={{
            remember: true
          }}
          onFinish={this.onFinish}
        >
          <Form.Item
            name="mobile"
            rules={[
              {
                required: true,
                message: '请输入手机号'
              }
            ]}
          >
            <Input
              size="large"
              prefix={<UserOutlined />}
              placeholder="手机号"
            />
          </Form.Item>
          <Form.Item
            name="captcha"
            rules={[
              {
                required: true,
                message: '请输入图片验证码'
              }
            ]}
          >
            <Space>
              <Input
                size="large"
                prefix={<DingtalkOutlined />}
                type="text"
                placeholder="图片验证码"
              />
              <Captcha
                ref={this.captchaRef}
                saveKey={this.saveKey}
                h={40}
              ></Captcha>
            </Space>
          </Form.Item>
          <Form.Item
            name="smscode"
            rules={[
              {
                required: true,
                message: '请输入短信验证码'
              }
            ]}
          >
            <Space>
              <Input
                size="large"
                prefix={<DingtalkOutlined />}
                type="text"
                placeholder="短信验证码"
              />
              <Button
                size="large"
                block
                type="primary"
                htmlType="submit"
                className="login-form-button"
                onClick={this.getSmsCode}
                disabled={this.state.disabled}
              >
                {this.state.time >= 5
                  ? '获取验证码'
                  : this.state.time + 's重发'}
              </Button>
            </Space>
          </Form.Item>
          <Form.Item>
            {/* block 调整为父元素的宽度 */}
            <Button
              size="large"
              block
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              立即登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
  // 倒计时方法
  timeDown = () => {
    if (this.state.time === 0) {
      this.setState({ time: 5, disabled: false })
    } else {
      this.setState({ time: this.state.time - 1 })
      setTimeout(() => {
        this.timeDown()
      }, 1000)
    }
  }
  // 获取手机验证码操作
  getSmsCode = () => {
    // 点击发送短信验证码后 就不允许点击了
    this.setState({ disabled: true })
    // 启用倒计时
    this.timeDown()
  }
  // 收集表单数据并提交
  onFinish = (values) => {
    // 将验证码的key添加到提交数据中
    values['key'] = this.state.key
    // console.log('Received values of form: ', values)
    // 发送请求,登录校验
    req.post(url.PasswdLogin, values).then((res) => {
      console.log(res)
      // 登录成功
      if (res.data.errNo === 0) {
        message.success('登录成功', 2, () => {
          // 跳转到管理平台首页面
          // console.log(this.props)
          this.props.history.push('/dashboard')
        })
      } else {
        // 登录失败
        message.error(res.data.errText, 2, () => {
          //清空所有的表单元素内容
          // this.formRef.current.setFieldsValue({
          //   username:'',
          //   password:''
          // })
          this.formRef.current.resetFields()
          // 重载验证码图片
          this.captchaRef.current.load()
          // window.location.reload()
        })
      }
    })
  }
}
export default withRouter(MobileForm)
